﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>singers</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
    </noscript>
</head>

<style>
    .search-input {
        border-radius: 50px;
        height: 50px;
    }
    
    .search-submit {
        background-image: url(../images/search-icon.png);
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 250px;
    }
</style>

<body>
    <div class="container demo-1">


        <nav class="codrops-demos" style="position: absolute; left: 300px; top: 5px;">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <p style="font-size: 20px;">&nbsp;&nbsp;&nbsp;Please choose one type to search</p>
            <a style="font-size: 30px;" class="current-demo" href="#">singers</a>
            <a style="font-size: 30px;" href="../ranking_of_albums/index.html">albums</a>
            <a style="font-size: 30px;" href="../ranking_of_songs/index.html">songs</a>
            <form target="_self" style="position: absolute; left: 800px; top: 60px; font-size: 20px;" method="GET" action="../search/search_singer.php">
                <input style="font-size: 20px;" type="text" class="search-input" placeholder="          Type to search" name="singer" />
                <input type="submit" class="search-submit" value=" ">
            </form>
            <!-- <p style="position: absolute; left: 1350px; top: 70px;font-size: 20px;font-weight: 900;">歌手前五榜单</p> -->
        </nav>

        <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <!-- <form target="_self" style="position: relative; left: 1150px; top: 50px;font-size: 50px;" method="GET" action="../search/search_singer.php">
              <input style="font-size: 30px;" type="text" class="search-input" placeholder="     Type to search" name="singer"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a target="_self" href="php/onesinger.php ? singer=周杰伦">
                            <div class="deco" style="background-image: url('https://p2.music.126.net/ql3nSwy0XKow_HAoZzRZgw==/109951163111196186.jpg?param=640y300'); background-size:550px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>周杰伦</h2>
                        <blockquote>
                            <p>
                                著名歌手，音乐人，词曲创作人，编曲及制作人，MV及电影导演。新世纪华语歌坛领军人物，中国风歌曲始祖，被时代周刊誉为“亚洲猫王”，是2000年后亚洲流行乐坛最具革命性与指标性的创作歌手，亚洲销量超过3100万张，有“亚洲流行天王”之称，开启华语乐坛“R&B时代”与“流行乐中国风”的先河。
                            </p>
                            <cite style="font-size: 15px;">total comments : 7771258</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_singer.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="singer"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesinger.php ? singer=薛之谦">
                            <div class="deco" style="background-image: url('https://p2.music.126.net/W__FCWFiyq0JdPtuLJoZVQ==/109951163765026271.jpg?param=640y300'); background-size:550px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>薛之谦</h2>
                        <blockquote>
                            <p>薛之谦（Joker Xue），1983年7月17日出生于上海，华语流行乐男歌手、影视演员、音乐制作人，毕业于格里昂酒店管理学院。 2005年，参加选秀节目《我型我秀》正式出道 。2006年，发行首张同名专辑《薛之谦》，随后凭借歌曲《认真的雪》获得广泛关注。
                            </p>
                            <cite style="font-size: 15px;">total comments : 6691270</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_singer.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="singer"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesinger.php ? singer=许嵩">
                            <div class="deco" style="background-image: url('https://p2.music.126.net/_D9P0JKRDYm3jEay9EfhRw==/109951163536274581.jpg?param=640y300'); background-size:550px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>许嵩</h2>
                        <blockquote>
                            <p>
                                著名作词人、作曲人、唱片制作人、歌手。内地独立音乐之标杆人物，有音乐鬼才之称。2009年独立出版首张词曲全创作专辑《自定义》，2010年独立出版第二张词曲全创作专辑《寻雾启示》，两度掀起讨论热潮，一跃成为内地互联网讨论度最高的独立音乐人。
                            </p>
                            <cite style="font-size: 15px;">total comments : 6363280</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_singer.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="singer"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesinger.php ? singer=陈奕迅">
                            <div class="deco" style="background-image: url('https://p1.music.126.net/nILBk4DaE3yV__25uq-5GQ==/18641120139241412.jpg?param=640y300'); background-size:550px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>陈奕迅</h2>
                        <blockquote>
                            <p>
                                著名实力派粤语流行音乐歌手、演员，香港演艺人协会副会长之一，曾被美国《时代杂志》形容为影响香港乐坛风格的人物，同时也是继许冠杰、张学友之后第三个获得“歌神”称号的香港男歌手。同时他也是继张学友后另一个在台湾获得成功的香港歌手，在2003年他成为了第二个拿到台湾金曲奖“最佳国语男演唱人”的香港歌手。
                            </p>
                            <cite style="font-size: 15px;">total comments : 3339069</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_singer.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="singer"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/onesinger.php ? singer=华晨宇">
                            <div class="deco" style="background-image: url('https://p1.music.126.net/tMH2KjUioNW57zbixCA5Pg==/109951164158510116.jpg?param=640y300'); background-size:550px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>华晨宇</h2>
                        <blockquote>
                            <p>华晨宇，1990年2月7日生于湖北十堰 ，中国男歌手，毕业于武汉音乐学院。 2013年，参加湖南卫视《快乐男声》获年度总冠军出道 。2014年1月，首登央视春晚舞台。9月6日-7日，在北京万事达中心连开两场“火星”演唱会 ，随后首张个人专辑《卡西莫多的礼物》发行 ，并凭此专辑获第十五届音乐风云榜年度最受欢迎男歌手等奖项。
                            </p>
                            <cite style="font-size: 15px;">total comments : 3159260</cite>
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- /sl-slider -->

            <nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>

            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>

        </div>
        <!-- /slider-wrapper -->

    </div>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="js/jquery.slitslider.js"></script>
    <script type="text/javascript">
        $(function() {

            var Page = (function() {

                var $navArrows = $('#nav-arrows'),
                    $nav = $('#nav-dots > span'),
                    slitslider = $('#slider').slitslider({
                        onBeforeChange: function(slide, pos) {

                            $nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

                        }
                    }),

                    init = function() {

                        initEvents();

                    },
                    initEvents = function() {

                        // add navigation events
                        $navArrows.children(':last').on('click', function() {

                            slitslider.next();
                            return false;

                        });

                        $navArrows.children(':first').on('click', function() {

                            slitslider.previous();
                            return false;

                        });

                        $nav.each(function(i) {

                            $(this).on('click', function(event) {

                                var $dot = $(this);

                                if (!slitslider.isActive()) {

                                    $nav.removeClass('nav-dot-current');
                                    $dot.addClass('nav-dot-current');

                                }

                                slitslider.jump(i + 1);
                                return false;

                            });

                        });

                    };

                return {
                    init: init
                };

            })();

            Page.init();

            /**
             * Notes: 
             * 
             * example how to add items:
             */

            /*
      
      var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
      
      // call the plugin's add method
      ss.add($items);
  
      */

        });
    </script>


</body>

</html>